{% load static %}
{% load i18n wagtailcore_tags %}


{% for post in home_page.test1 %}
<a href="{% pageurl post %}">
	<span class="navName">{{ post }}</span>
</a>
{% endfor %}
<p>



<!--[if lt IE 11]> 建议您使用IE11以上版本或者其它浏览器，此浏览器无法正常访问CHAPPIE! <![endif]-->
<div class="{% block body_class %}body_class{% endblock body_class %}">

	<!-- banner -->
	<div class="launchWrapper">
		<div class="swiper-container" id="indexFocus">
			<div class="swiper-wrapper bannerContainer">
				<div class="bannerContainer swiper-slide">
					<div class="textBox">
						<h2 class="title">优化工作场景 改变企业复杂管理现状</h2>
						<p class="detail">毫秒级实时多端同步，随时随地开展工作，满足多场景办公使用需求</p>
						<div class="">
							<a href="https://www.duoguyu.com/?v=chappie" target="_blank" class="moreBtn">LOAD MORE
								→</a>
						</div>
					</div>
					<div class="bannerBox">
						<img class="bannerBox" src="{% static 'chappie/picture/200614033347687.png' %}"
							alt="优化工作场景 改变企业复杂管理现状" />
					</div>
				</div>
				<div class="bannerContainer swiper-slide">
					<div class="textBox">
						<h2 class="title">面向未来的协同办公模式</h2>
						<p class="detail">文档实时协同 · 知识沉淀管理 · 数据安全可控</p>
						<div class="">
							<a href="https://www.duoguyu.com/?v=chappie" target="_blank" class="moreBtn">LOAD MORE
								→</a>
						</div>
					</div>
					<div class="bannerBox">
						<img class="bannerBox" src="{% static 'chappie/picture/200614033227686.png' %}"
							alt="面向未来的协同办公模式" />
					</div>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>

	<!-- p2 -->
	<div class="pageContainer linear">
		<div class="container">
			<div class="textBox">
				<h2 class="title">全新一代云端 Office，面向未来的办公软件</h2>
				<p class="detail">文档实时协同 · 知识沉淀管理 · 数据安全可控</p>
			</div>
			<div class="itemWrap">
				<div class="itemBox">
					<div class="imgLabel">
						<img class="img" src="{% static 'chappie/picture/1.png' %}" />
					</div>
					<h3 class="title">实时协同办公</h3>
					<p>协同编辑、划词标注、即写即存、历史版本</p>
				</div>
				<div class="itemBox">
					<div class="imgLabel">
						<img class="img" src="{% static 'chappie/picture/2.png' %}" />
					</div>
					<h3 class="title">代码规范化</h3>
					<p>渐进式增强，更加符合SEO的代码书写标准</p>
				</div>
				<div class="itemBox">
					<div class="imgLabel">
						<img class="img" src="{% static 'chappie/picture/3.png' %}" />
					</div>
					<h3 class="title">文档实时协同</h3>
					<p>一键分享、轻松预览、同步备份、即写即存</p>
				</div>
				<div class="itemBox">
					<div class="imgLabel">
						<img class="img" src="{% static 'chappie/picture/4.png' %}" />
					</div>
					<h3 class="title">智能行为验证</h3>
					<p>新一代身份认证，深度学习并强化人机行为</p>
				</div>
				<div class="itemBox">
					<div class="imgLabel">
						<img class="img" src="{% static 'chappie/picture/5.png' %}" />
					</div>
					<h3 class="title">多重安全防护</h3>
					<p>提供多重安全防护措施，让数据更安全</p>
				</div>
				<div class="itemBox">
					<div class="imgLabel">
						<img class="img" src="{% static 'chappie/picture/6.png' %}" />
					</div>
					<h3 class="title">集中管理服务</h3>
					<p>私有部署、集中管理、卓越体验、更加省心</p>
				</div>
			</div>

			<!-- 常见问题 -->
			<div class="textBox small">
				<h2 class="title">如何帮助你的团队提升工作效率？</h2>
			</div>
			<div class="newsGroup">
				<div class="item br">
					<div class="imgBox">
						<img class="img" src="{% static 'chappie/picture/200614122456648.jpg' %}"
							alt="“改变世界”的罗永浩和锤子科技改变了什么？" title="“改变世界”的罗永浩和锤子科技改变了什么？">
					</div>
					<div class="textBox">
						<h3 class="title">“改变世界”的罗永浩和锤子科技改变了什么？</h3>
						<p class="detail">2015 年，锤子科技亏损 4.62 亿元；2016 年，虽然全年营收 8.09 亿元，但净亏损达 4.28 ...</p>
						<p>
							<a href="https://chappie.duoguyu.com/design/35.html" target="_blank" class="more">了解更多
								→</a>
						</p>
					</div>
				</div>
				<div class="item br">
					<div class="imgBox">
						<img class="img" src="{% static 'chappie/picture/200620111759923.jpg' %}" alt="设计大秘籍，噗噗星人来袭！"
							title="设计大秘籍，噗噗星人来袭！">
					</div>
					<div class="textBox">
						<h3 class="title">设计大秘籍，噗噗星人来袭！</h3>
						<p class="detail">2020.6.6 正值PUPU噗噗两周岁，我们揭开PUPU面纱，空降PUPU星球的其他物种，正式发布噗噗星人家...</p>
						<p>
							<a href="https://chappie.duoguyu.com/design/82.html" target="_blank" class="more">了解更多
								→</a>
						</p>
					</div>
				</div>
				<div class="item ">
					<div class="imgBox">
						<img class="img" src="{% static 'chappie/picture/200614010706595.jpg' %}"
							alt="“改变世界”的罗永浩和锤子科技改变了什么？" title="“改变世界”的罗永浩和锤子科技改变了什么？">
					</div>
					<div class="textBox">
						<h3 class="title">“改变世界”的罗永浩和锤子科技改变了什么？</h3>
						<p class="detail"> 罗永浩宣布，从今往后，所有的手机产品都将延续&ldquo;坚果手机&rdquo;这个名字，公司名依旧是&ldquo;锤子科技...</p>
						<p>
							<a href="https://chappie.duoguyu.com/design/39.html" target="_blank" class="more">了解更多
								→</a>
						</p>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- p3 -->
	<div class="pageContainer">
		<div class="container">
			<div class="textBox">
				<h2 class="title">全新一代云端 Office，面向未来的办公软件</h2>
				<p class="detail">文档实时协同 · 知识沉淀管理 · 数据安全可控</p>
			</div>
			<div class="projectGroup">
				<div class="textBox">
					<h3>专为工作场景优化 改变企业复杂管理现状</h3>
					<ul class="pl20">
						<li>多人在线协作编辑文档，告别通过邮件、IM 软件多次传输文件的繁复</li>
						<li>毫秒级实时多端同步，随时随地开展工作，满足多场景办公使用需求</li>
						<li>文档编辑历史自动保存，可随时追溯查看，还可一键还原到任一历史版本</li>
						<li>文档「专业版」高度兼容 Word 文档，支持公文、合同等文档的编辑及排版</li>
					</ul>
				</div>
				<img class="imgBox" src="{% static 'chappie/picture/01.png' %}">
			</div>

			<div class="projectGroup">
				<img class="imgBox" src="{% static 'chappie/picture/02.png' %}">
				<div class="textBox">
					<h3>专为工作场景优化 改变企业复杂管理现状</h3>
					<ul class="pl20">
						<li>多人在线协作编辑文档，告别通过邮件、IM 软件多次传输文件的繁复</li>
						<li>毫秒级实时多端同步，随时随地开展工作，满足多场景办公使用需求</li>
						<li>文档编辑历史自动保存，可随时追溯查看，还可一键还原到任一历史版本</li>
						<li>文档「专业版」高度兼容 Word 文档，支持公文、合同等文档的编辑及排版</li>
					</ul>
				</div>
			</div>

			<div class="projectGroup">
				<div class="textBox">
					<h3>专为工作场景优化 改变企业复杂管理现状</h3>
					<ul class="pl20">
						<li>多人在线协作编辑文档，告别通过邮件、IM 软件多次传输文件的繁复</li>
						<li>毫秒级实时多端同步，随时随地开展工作，满足多场景办公使用需求</li>
						<li>文档编辑历史自动保存，可随时追溯查看，还可一键还原到任一历史版本</li>
						<li>文档「专业版」高度兼容 Word 文档，支持公文、合同等文档的编辑及排版</li>
					</ul>
				</div>
				<img class="imgBox" src="{% static 'chappie/picture/03.png' %}">
			</div>

			<div class="linkBox">
				<a href="#" target="_blank" class="more">了解更多功能 ></a>
			</div>

		</div>
	</div>



	<!-- p4 -->
	<div class="pageContainer linear line">
		<div class="container">
			<div class="textBox">
				<h2 class="title">他们都在使用CHAPPIE</h2>
				<p class="detail">来自 互联网、金融教育、科技圈 等各个行业的客户</p>
			</div>
			<div class="poloGroup">
				<div class="item">
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614015027901.jpg' %}">
							<div class="infoBox">
								<h2>刘小帅</h2>
								<p>字节跳动 · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>进一步提高了团队的沟通及工作效率，同时也有很多更符合国内工作习惯的功能，产品、设计和研发都串到了一个很完整的工作流当中，对于整个项目的推进和管理可以说是比较实用了。
							</p>
						</div>
					</div>
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614014810467.jpg' %}">
							<div class="infoBox">
								<h2>琳达</h2>
								<p>36Kr · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>本土有这类开发工具，进一步提高了团队的沟通及工作效率，同时也有很多更符合国内工作习惯的功能，产品、设计和研发都串到了一个很完整的工作流当中，对于整个项目的推进和管理可以说是比较实用了。
							</p>
						</div>
					</div>
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614014731106.jpg' %}">
							<div class="infoBox">
								<h2>周二珂</h2>
								<p>倍洽 · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>协作伴随着冲突，行动和等待永远是对立和共存的，沟通与理解，是团队协作的正能量，蓝湖提供的平台，极大提高了设计对接产品和开发的协作效率。</p>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614014626714.jpg' %}">
							<div class="infoBox">
								<h2>Zorian.joy</h2>
								<p>Perister · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>功能的强大导致蓝湖必然的成功，除了很方便的标注切图之外，在用户体验上更是站在整个团队层面思考团队可能遇到的协作问题，并且着手帮着我们一起去解决问题。蓝湖一个用心研发产品的良心企业。
							</p>
						</div>
					</div>
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614014417953.jpg' %}">
							<div class="infoBox">
								<h2>柯幼良</h2>
								<p>数字尾巴 · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>协作伴随着冲突，行动和等待永远是对立和共存的，沟通与理解，是团队协作的正能量，蓝湖提供的平台，极大提高了设计对接产品和开发的协作效率。</p>
						</div>
					</div>
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614014345901.jpg' %}">
							<div class="infoBox">
								<h2>李晓琳</h2>
								<p>少数派 · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>移动互联网时代设计的趋势就是信息提效。蓝湖平台很好的衔接了设计上下游，简化了设计工具与人的协同难度。设计师和企业都能从中获得更充足的设计资源、更优秀的设计作品、更高效的设计协作。
							</p>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614014238940.jpg' %}">
							<div class="infoBox">
								<h2>朱迪</h2>
								<p>蓝湖设计 · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>为网易在效率和沟通上，解决了很多问题。以新功能【切图压缩】为例，现在在蓝湖上，直接就能下载压缩后的切图，解决了用户一个很大的痛点。优秀的产品都是具有服务感的，市面上任何用起来顺手的产品都是非常具有服务感的，蓝湖就是这么一款产品。
							</p>
						</div>
					</div>
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614014123994.jpg' %}">
							<div class="infoBox">
								<h2>石翰柯</h2>
								<p>追波网 · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>设计师还应该花更多的时间专注设计本身，不被标注、切图等事情影响专注的工作，这个时候可以借助蓝湖等工具完成标注和切图。</p>
						</div>
					</div>
					<div class="contentWrap">
						<div class="topWrap">
							<img class="img" src="{% static 'chappie/picture/200614013903364.jpg' %}">
							<div class="infoBox">
								<h2>黄磊</h2>
								<p>站酷网 · ESUX 上海设计负责人</p>
							</div>
						</div>
						<div class="btmWrap">
							<p>进一步提高了团队的沟通及工作效率，同时也有很多更符合国内工作习惯的功能，产品、设计和研发都串到了一个很完整的工作流当中，对于整个项目的推进和管理可以说是比较实用了。
							</p>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<script>
		$(function () {
			indexBannerInit();
		});
		// 顶部
		var indexBannerInit = function () {
			var indexFocusSwiper = new Swiper('#indexFocus', {
				autoplay: {
					disableOnInteraction: false,
					delay: 5000
				},
				pagination: {
					el: '#indexFocus .swiper-pagination',
					clickable: true
				},
				/*
				navigation: {
				    nextEl: '#indexFocus .swiper-button-next',
				    prevEl: '#indexFocus .swiper-button-prev'
				},
				*/
				effect: 'fade',
				fadeEffect: {
					crossFade: true
				},
				loop: true
			});
		}
	</script>